<UserControl
  x:Class="ViewOnCore.Helper.WPF.GradientPicker"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:wpf="clr-namespace:ViewOnCore.Helper.WPF">
  <UserControl.Resources>
    
    <Style x:Key="GradientPicker.Thumb" TargetType="{x:Type Thumb}">
      <Setter Property="SnapsToDevicePixels" Value="true"/>
      <Setter Property="OverridesDefaultStyle" Value="true"/>
      <Setter Property="Focusable" Value="false"/>
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type Thumb}">
                <Path
											  Width="9"
											  Height="16"
											  Data="M160,400 L160,310 200,280 240,310 240,400 z"
											  Stretch="Fill"
											  Fill="{DynamicResource VOGradient01}"
											  Stroke="{DynamicResource VOGradient02}">
                </Path>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>

    <ControlTemplate x:Key="GradientPicker.HorizontalSlider" TargetType="{x:Type Slider}">
        <Track Grid.Row="1" x:Name="PART_Track">
          <Track.Thumb>
            <Thumb x:Name="Thumb" Style="{StaticResource GradientPicker.Thumb}" />
          </Track.Thumb>
        </Track>
    </ControlTemplate>

    <Style x:Key="GradientPicker.Slider" TargetType="{x:Type Slider}">
      <Setter Property="SnapsToDevicePixels" Value="true"/>
      <Setter Property="OverridesDefaultStyle" Value="true"/>
      <Style.Triggers>
        <Trigger Property="Orientation" Value="Horizontal">
          <Setter Property="MinWidth" Value="30" />
          <Setter Property="MinHeight" Value="21" />
          <Setter Property="Template" Value="{StaticResource GradientPicker.HorizontalSlider}" />
        </Trigger>
      </Style.Triggers>
    </Style>
    
  </UserControl.Resources>
  <Grid>
    
    <Grid.RowDefinitions>
      <RowDefinition/>
      <RowDefinition/>
    </Grid.RowDefinitions>

    <Border BorderBrush="{DynamicResource VOColor10}" BorderThickness="1">
      <Rectangle x:Name="recGradient" Width="200" Height="30" Fill="Red"></Rectangle>
    </Border>

    <Grid x:Name="griSliders" Grid.Row="1" Margin="0,-10,0,0">
    </Grid>

    <Popup
     x:Name="popup"
     PlacementTarget="{Binding ElementName=recGradient}"
     Placement="Top"
     VerticalAlignment="Top">
      <Border BorderBrush="{DynamicResource VOColor 10}" BorderThickness="1">
        <wpf:ColorPicker x:Name="colorPicker"/>
      </Border>
    </Popup>
    
  </Grid>
</UserControl>
